<template>
    <a-spin :spinning="viewLoading" :style="spinStyle">
        <a-row class="select">
            <a-space>
                <SelectComponent :options="userOptions" v-model:value="uid" title="用户" style="width: 100px" />
                <SelectComponent
                    :options="userGroupOptions"
                    v-model:value="userGroupIds"
                    mode="tags"
                    title="用户组"
                    style="width: 100px"
                />
                <SelectComponent
                    :options="websiteGroupOptions"
                    v-model:value="websiteGroupId"
                    title="网站组"
                    style="width: 100px"
                />
                <SelectComponent :options="createOptions" v-model:value="createId" title="负责人" style="width: 100px" />
            </a-space>
        </a-row>
        <a-row style="margin: 10px 0">
            <a-space>
                <InputComponent v-model:value="keyword" placeholder="请输入关键词" title="关键词" :width="140" />
                <InputComponent v-model:value="message" placeholder="请输入错误信息" title="信息" :width="150" />
                <InputComponent v-model:value="ruleName" placeholder="请输入规则名" title="规则名" :width="120" />
                <InputComponent v-model:value="generateIndex" placeholder="请输入生成索引" title="索引" :width="120" />
                <a-button type="primary" @click="searchFunc" :loading="searchLoading">
                    <template #icon>
                        <SearchOutlined />
                    </template>
                    搜索
                </a-button>
                <a-button type="dashed" @click="exportSearch">
                    <template #icon>
                        <download-outlined />
                    </template>
                    导出搜索结果
                </a-button>
            </a-space>
        </a-row>

        <a-table
            sticky
            :columns="columns"
            :data-source="tableData"
            @change="handleTableChange"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            bordered
            :rowKey="createRowKey"
            :pagination="false"
            size="small"
        >
        </a-table>
    </a-spin>
    <a-row justify="center" style="margin-top: 20px">
        <a-pagination
            v-model:current="page"
            v-model:pageSize="size"
            show-quick-jumper
            :total="total"
            showSizeChanger
            @change="pageChange"
            :show-total="(total: number) => `总计 ${total} 项`"
        />
    </a-row>
</template>

<script lang="ts" setup>
    import { useState, useTableColumn, useGetOptions } from "@/hooks/useErrorLogs";
    import type { TableItem } from "@/hooks/useErrorLogs";
    import { SearchOutlined, DownloadOutlined } from "@ant-design/icons-vue";
    import { SelectComponent, InputComponent } from "@/components/home/tsx/commonComponents";
    const { columns } = useTableColumn();
    const viewLoading = ref(true);
    const { userOptions, userGroupOptions, websiteGroupOptions, createOptions } = useGetOptions();
    const {
        page,
        size,
        message,
        keyword,
        uid,
        userGroupIds,
        ruleName,
        createId,
        websiteGroupId,
        total,
        tableData,
        spinStyle,
        searchLoading,
        generateIndex,
        sort_field,
        order,
        exportSearch,
        searchFunc
    } = useState(userOptions, userGroupOptions, websiteGroupOptions, createOptions);
    const pageChange = (pageNumber: number) => {
        page.value = pageNumber;
    };
    // 错误日志
    const createRowKey = (row: TableItem) => row._id;
    // 表格选中的行key
    const selectedRowKeys = ref<Array<string>>([]);
    const onSelectChange = (keys: any) => {
        selectedRowKeys.value = keys;
    };
    const handleTableChange = (pag: any, filters: any, sorter: any) => {
        if (sorter.order) {
            order.value = sorter.order.slice(0, sorter.order.length - 3);
            sort_field.value = sorter.field;
        } else {
            order.value = "";
        }
        searchFunc();
    };

    onMounted(() => {
        setTimeout(() => {
            viewLoading.value = false;
        }, 1000);
    });
</script>

<style scoped lang="scss"></style>
